<template>
    <div id="title">
      <span class="content-wrapper" @mousemove="isShowTips" @mouseleave="isHiddenTips">
        <slot></slot>
        <div class="tips-wrapper" v-show="isShow">
          {{ tips }}
        </div>
      </span>
    </div>
</template>

<script>
  export default {
    name: 'yioks-title',
    props: {
      tips: String
    },
    data() {
      return {
        isShow: false
      }
    },
    methods: {
      isShowTips() {
        this.isShow = true;
      },
      isHiddenTips() {
        this.isShow = false;
      }
    }
  };
</script>

<style lang="stylus" scoped>
.content-wrapper
  position relative
  cursor pointer
  .tips-wrapper
    background-color rgba(0,0,0,.4)
    color #fff
    border-radius 3px
    padding 2px 5px
    position absolute
    bottom 1.5em
    left 0
  word-break keep-all
</style>
